<template>
  <div>
    <Header>
      <template v-slot:left>
        <span>同步课文 <i class="el-icon-arrow-right"></i> 课文本</span>
        <div class="help-btn ml20 mr20">
          <el-popover placement="bottom" width="250" trigger="hover">
            <div class="text-book-header-left text-book--help">
              <p>1、鼠标左键点击播放句子</p>
              <p>2、鼠标右键点击显示/隐藏句子</p>
            </div>
            <span slot="reference">
              <img class="click" src="@/assets/img/icon/help-big.png" alt="" />
            </span>
          </el-popover>
        </div>
      </template>
    </Header>
    <div class="intelligent-container text-book">
      <div class="intelligent-train">
        <div class="w1200 intelligent-train-header text-book-top mb20">
          <div class="header-left">
            {{ title }}
          </div>
          <div class="header-right">
            <span>
              <!--  @timeupdate="audioTimeupdate" -->
              <AudioPlayText
                :type="5"
                :audioSrc="baseURL + audioSrc"
                @onIsPlay="setIsPlay"
                ref="textAudioPlay"
                :audioStartTime="startTime"
                :audioEndTime="endTime"
                :isPlayAll="isPlayAll"
                :sentenceList="sentenceList"
                :playNum="playNum"
                @setPlayNum="setPlayNum"
                @audioPause="audioPause"
              >
                <template v-slot:controls-custom>
                  <span
                    class="right-audio click"
                    @click="
                      audioIsPlayComputed
                        ? handleClickPauseAudio()
                        : handleClickPlayAudio()
                    "
                  >
                    <i
                      v-if="audioIsPlayComputed"
                      class="font_family icon-zanting"
                    ></i>
                    <i
                      v-if="!audioIsPlayComputed"
                      class="font_family icon-bofang"
                    ></i>
                  </span>
                  <div class="audio-progress">
                    <div class="progress-bg">
                      <!-- <div
                        :style="`width: ${(bufferedTime / totalTime) * 100}%`"
                        class="progress-buffer"
                      ></div> -->
                      <div
                        :style="`width: ${
                          ((playNum + 1) / sentenceList.length) * 100
                        }%`"
                        class="progress-play"
                      ></div>
                    </div>
                  </div>
                  <!-- <span class="audio-time"
                    >{{ currentAudioTime | filterTime(2, "m") }} /{{
                      totalAudioTime | filterTime(2, "m")
                    }}
                  </span> -->
                </template>
              </AudioPlayText>
            </span>
            <span class="sentence-progress">
              {{ playNum + 1 }} / {{ sentenceList.length }}
            </span>
          </div>
        </div>
        <div class="intelligent-train-contain-box">
          <div class="intelligent-train-contain w1200">
            <div
              class="reading-question text-book-container"
              :style="`font-size:${articleFontSize}px`"
            >
              <div class="set-font-size-box">
                <span class="title">字体</span>
                <span class="number">{{ articleFontSize }}</span>
                <div class="slider-font-size">
                  <img
                    class="click"
                    @click="changeFontSize(articleFontSize + 2)"
                    src="@/assets/img/add-bg-s.png"
                    alt=""
                  />
                  <el-slider
                    :show-tooltip="false"
                    v-model="articleFontSize"
                    vertical
                    height="100px"
                    :min="16"
                    :max="50"
                  >
                  </el-slider>
                  <img
                    class="click"
                    @click="changeFontSize(articleFontSize - 2)"
                    src="@/assets/img/sub-bg-s.png"
                    alt=""
                  />
                </div>
              </div>
              <div class="text-book-item text-book-left">
                <div class="text-book-container-header">
                  <div class="title">英文</div>
                  <div class="switch">
                    <el-switch
                      :width="30"
                      v-model="isShowE"
                      :active-color="$store.getters.color_main"
                      inactive-color="#e5e5e5"
                      @change="changeIsShowE"
                    >
                    </el-switch>
                    <span v-show="!isShowE">全部隐藏</span>
                    <span v-show="isShowE">全部显示</span>
                  </div>
                </div>
                <div class="reading-article mr20 text-book-contain">
                  <div class="text-paragraph-list">
                    <div class="scorll-box">
                      <span
                        class="text-book-paragraph"
                        v-for="(item, index) in sentenceList"
                        :key="index"
                        :class="[item.name ? 'dialogue' : 'article']"
                        :ref="`sentence-${index}`"
                      >
                        <span class="name" v-if="item.name">
                          {{ item.name }}:
                        </span>
                        <br v-if="!item.name && item.format == 1" />
                        <span
                          class="text-content click"
                          :class="[
                            item.isShowE ? 'show-text' : 'hidden-text',
                            playNum == index ? 'play-contain' : '',
                            !item.name && item.format == 1
                              ? 'paragraph-first'
                              : '',
                          ]"
                          @click="playParagraphAudio(item, index)"
                          @contextmenu.prevent.stop="
                            item.isShowE = !item.isShowE
                          "
                        >
                          <span>{{ item.content }}</span>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="text-book-item text-book-right">
                <div class="text-book-container-header">
                  <div class="title">中文</div>
                  <div class="switch">
                    <el-switch
                      :width="30"
                      v-model="isShowC"
                      :active-color="$store.getters.color_main"
                      inactive-color="#e5e5e5"
                      @change="changeIsShowC"
                    >
                    </el-switch>
                    <span v-show="!isShowC">全部隐藏</span>
                    <span v-show="isShowC">全部显示</span>
                  </div>
                </div>
                <div class="reading-article mr20 text-book-contain">
                  <div class="text-paragraph-list">
                    <div class="scorll-box">
                      <span
                        class="text-book-paragraph"
                        v-for="(item, index) in sentenceList"
                        :key="index"
                        :class="[item.name ? 'dialogue' : 'article']"
                        :ref="`paraphrase-${index}`"
                      >
                        <span class="name" v-if="item.name">
                          {{ item.name }}:
                        </span>
                        <br v-if="!item.name && item.format == 1" />
                        <span
                          class="text-content click"
                          :class="[
                            item.isShowC ? 'show-text' : 'hidden-text',
                            playNum == index ? 'play-contain' : '',
                            !item.name && item.format == 1
                              ? 'paragraph-first'
                              : '',
                          ]"
                          @click="playParagraphAudio(item, index)"
                          @contextmenu.prevent.stop="
                            item.isShowC = !item.isShowC
                          "
                        >
                          {{ item.translation }}
                        </span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
// import AudioPlay from "@/components/AudioPlay";
import AudioPlayText from "../components/AudioPlay";
import { getTextBook } from "@/api/text";
export default {
  data() {
    return {
      isShowE: true,
      isShowC: true,
      textData: {},
      checkedBookData: {},
      unitId: null,
      currentTime: 0,
      sentenceList: [],
      title: "",
      audioSrc: "",
      articleFontSize: 16,
      startTime: null,
      endTime: null,
      audioIsPlay: false,
      isPlayAll: false,
      playNum: 0,
    };
  },
  computed: {
    audioIsPlayComputed() {
      return this.audioIsPlay || this.isPlayAll;
    },
    // playNum() {
    //   let index = this.sentenceList.findIndex((item) => {
    //     return this.currentTime < item.startTime;
    //   });
    //   if (index < 0) {
    //     index = this.sentenceList.length;
    //   }
    //   if (index - 1 < 0) {
    //     return 0;
    //   }
    //   return index - 1;
    // },
  },
  components: {
    Header,
    // AudioPlay,
    AudioPlayText,
  },
  methods: {
    setPlayNum(number) {
      if (number >= 0 && number <= this.sentenceList.length - 1) {
        this.playNum = number;
      }
    },
    handleClickPauseAudio() {
      this.isPlayAll = false;
      this.$refs.textAudioPlay.pauseAudio();
    },
    handleClickPlayAudio() {
      this.isPlayAll = true;
      this.playAudioWithEnd();
    },

    playParagraphAudio(data, index) {
      this.isPlayAll = false;
      this.setPlayNum(index);
      this.$nextTick(() => {
        this.playAudioWithEnd();
      });
    },
    playAudioWithEnd() {
      this.$refs.textAudioPlay.playAudio();
    },
    audioPause() {
      if (this.isPlayAll) {
        this.isPlayAll = false;
        this.playNum = 0;
      }
      // let endTime = this.sentenceList[this.playNum].endTime;
      // if (
      //   this.isPlayAll &&
      //   endTime &&
      //   this.playNum < this.sentenceList.length - 1
      // ) {
      //   this.playNum++;
      //   this.handleClickPlayAudio();
      // } else {
      //   if (this.isPlayAll) {
      //     this.isPlayAll = false;
      //     this.playNum = 0;
      //   }
      // }
    },
    setIsPlay(value) {
      this.audioIsPlay = value;
    },
    getText() {
      let params = {
        bookId: this.checkedBookData.book_id,
        unitId: this.unitId,
      };
      getTextBook(params).then((res) => {
        if (res.code == 200 && res.data) {
          this.textData = res.data;
          this.sentenceList = res.data.list.map((item) => {
            return {
              id: item.id,
              content: item.content,
              translation: item.translation,
              name: item.name,
              startTime: item.start_time,
              endTime: item.end_time,
              isShowC: true,
              isShowE: true,
              format: item.format,
            };
          });
          this.audioSrc = this.textData.audio_src;
          this.startTime = this.sentenceList[0].startTime;
          this.endTime = this.sentenceList[
            this.sentenceList.length - 1
          ].endTime;
        }
      });
    },
    changeFontSize(value) {
      if (value <= 50 && value >= 16) {
        this.articleFontSize = value;
      }
    },
    changeIsShowC() {
      this.sentenceList.forEach((item) => {
        item.isShowC = this.isShowC;
      });
    },
    changeIsShowE() {
      this.sentenceList.forEach((item) => {
        item.isShowE = this.isShowE;
      });
    },
  },
  created() {
    this.checkedBookData = JSON.parse(localStorage.getItem("bookData"));
    this.unitId = Number(this.$route.query.unitId);
    this.title = localStorage.getItem("checkedUnit")
      ? JSON.parse(localStorage.getItem("checkedUnit")).title
      : "";
    this.getText();
  },
  beforeDestroy() {},
  watch: {
    playNum() {
      if (
        this.$refs[`sentence-${this.playNum}`] &&
        this.$refs[`sentence-${this.playNum}`][0]
      ) {
        this.$refs[`sentence-${this.playNum}`][0].scrollIntoView();
      }
      if (
        this.$refs[`paraphrase-${this.playNum}`] &&
        this.$refs[`paraphrase-${this.playNum}`][0]
      ) {
        this.$refs[`paraphrase-${this.playNum}`][0].scrollIntoView();
      }
    },
  },
};
</script>